<template>
    <div class="app-container">
      <div class="mapDiv">
        <basicDataManage
          :allRadioIndexData="allRadioIndexData"
          :allListData="allListData"
          :typeCodeDataList="typeCodeDataList"
          :resetClearAllBool="resetClearAllBool"
          :dataTypeInfoArray="dataTypeInfoArray"
          @getLegendHtml="getLegendHtml"
        />
      </div>
      <div id="indexMap-mapDiv" class="ol-popup">
        <div class="select">
          <div class="selectData"><span>选择数据</span><el-icon style="cursor:pointer;" :size="23" @click="hideTabBoxDiv"><Expand /></el-icon></div>
        </div>
        <!--选择数据收起div-->
        <div class="box-hide-div" v-if="boxshow==false">
          <span class="box-hide-div-label-span">当前选择：</span>
          <span class="box-hide-div-text-span" v-if="queryParams.dataRangeText!='' || queryParams.dataLayerText!=''">
            {{ queryParams.dataRangeText }}，{{ queryParams.dataLayerText }}
          </span>
        </div>
        <div class="box" :class="versionCodeDivShow?'box-max':'box-min'" v-if="boxshow==true">
          <div style="position:absolute;top:0px;left:0px;bottom:40px;width:400px;">
            <div class="tab-div">
              <div class="tab-button" :class="activeName=='版本范围'?'tab-active':'tab-no'" @click="showDataRangeTab">
                版本范围
              </div>
              <div class="tab-button" :class="activeName=='数据图层'?'tab-active':'tab-no'" @click="showDataLayerTab">
                数据图层
              </div>
            </div>
            <!--tab内容div-->
          <div class="tab-content-all-div">
            <!--版本范围tab内容-->
            <div v-if="activeName=='版本范围'" class="tab-content">
              <span class="tab-span" @click="hideTabBoxDiv">收起</span>
              <div style="position:absolute;top:40px;left:20px;right:20px;bottom:0px;">
                <el-radio-group v-model="queryParams.dataRangeCountry" @change="changeRadio" style="margin-bottom: 20px;">
                  <el-radio label="1">国家级数据</el-radio>
                  <el-radio label="2">省级数据</el-radio>
                </el-radio-group>
                <el-form :model="queryParams" ref="queryRef" label-width="50px">
                  <el-row>
                    <el-col>
                      <el-form-item label="省" prop="dataRangeProvince">
                        <el-select v-model="queryParams.dataRangeProvince" placeholder="请选择" @change="chooseProvince" clearable
                                   :disabled="disabled1==true">
                          <el-option key="全国" label="全国" value="全国" v-if="queryParams.dataRangeCountry == '1'"></el-option>
                          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="市" prop="dataRangeCity">
                        <el-select v-model="queryParams.dataRangeCity" placeholder="请选择" @change="chooseCity" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国'">
                          <el-option key="全部" label="全部" value="全部" v-if="cityData&&cityData.length>0"></el-option>
                          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="区/县" prop="dataRangeArea">
                        <el-select v-model="queryParams.dataRangeArea" placeholder="请选择" @change="chooseArea" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国' || queryParams.dataRangeCity=='全部'">
                          <el-option key="全部" label="全部" value="全部" v-if="areaData&&areaData.length>0"></el-option>
                          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="float: right;margin-right: 50px;">
                  <el-button type="primary" @click="submitSelect">确定</el-button>
                  <el-button @click="resetSelect">重置</el-button>
                </div>
              </div>
            </div>
            <!--数据图层tab内容-->
            <div v-if="activeName=='数据图层'" class="tab-content">
              <!--版本范围当前选择div-->
              <div style="width:100%;height:80px;background:rgb(230 242 253);overflow: hidden;">
                <span class="tab-span" @click="showDataRangeTab">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataRangeText }}
                </span>
              </div>
              <!--数据图层当前选择div（展开）-->
              <div v-if="collapseData.showHideBool==true" class="tab-layercollapse-allShow">
                <div class="tab-layercollapse-allShow-head">
                  <span class="tab-span" @click="hideCollapseDiv">收起</span>
                  <span class="tab-span" @click="resetCollapseDiv" >重置</span>
                </div>
                <!--数据图层类型选择div-->
                <div class="tab-layercollapse-div">
                  <el-radio-group v-model="activeRadioLabel" @change="radioChange" style="display: block;">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item v-for="item in collapseLayerData" :title="item.dictItemName" :name="item.dictItemName" class="tab-layercollapse-header">
                        <div v-for="child in item.children" class="tab-collapse-radioDiv">
                          <el-radio :label="child.dictItemCode">{{child.dictItemName}}</el-radio>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-radio-group>
                </div>
              </div>
              <!--数据图层当前选择div（收起）-->
              <div v-if="collapseData.showHideBool==false" class="tab-layercollapse-allHide">
                <span class="tab-span" @click="collapseData.showHideBool=true">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataLayerText }}
                </span>
              </div>
              <!--重置div-->
              <div v-if="collapseData.showHideBool==false">
                <span style="float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;" @click="resetAllCollapseDiv" >重置</span>
              </div>
            </div>
          </div>
        </div>
        <!--底部收起按钮div-->
        <div class="foot-div" @click="hideTabBoxDiv">
          <svg-icon style="width:100%;height:100%;" class-name="arrow_drop_up-icon" icon-class="arrow_drop_up" />
        </div>
        <!--选择数据版本号div-->
        <div class="tab-select-versionCode-div" v-if="versionCodeDivShow">
          <el-input v-model="queryParams.dataTypeCodeSearchText" @change="querySysDataVersion" size="large" placeholder="请输入版本号" prefix-icon="Search"/>
          <p style="height:20px;color:black;font-weight: bold;">{{collapseData.layerName}}数据</p>
          <div class="tab-table-div">
            <el-table :data="versionCodeTableData" ref="versionCodeTable" @row-click="clickRow"
                      @select="handleSelectionChange" height="392" stripe style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="versionCode" label="版本号" width="190" />
              <el-table-column prop="uploadTime" label="上传时间" width="120" />
              <el-table-column align="right" width="50">
                <template #header></template>
                <template #default="scope">
                  <!--版本信息-->
                  <el-popover placement="right" :width="210" trigger="hover">
                    <template #reference>
                      <div style="height: 20px;">
                        <svg-icon style="width:100%;height:100%;" class-name="three_point_new-icon" icon-class="three_point_new" />
                      </div>
                    </template>
                    <template #default>
                      <p style="height: 20px;line-height: 20px;margin: 0px;font-weight: bold;">版本信息</p>
                      <el-divider style="margin:10px 0;" />
                      <p style="font-weight: bold;">版本说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.versionDesc }}</p>
                      <p style="font-weight: bold;">数据说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.dataDesc }}</p>
                      <p><span style="font-weight: bold;">上传人：</span>{{scope.row.uploadUserName}}</p>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        </div>
        <!--根据版本查询图层数据信息表格-->
        <!--基础数据信息表格-->
        <IndexTable v-if="resetClearAllBool==false && allTableDataBool==true"
                  :allTableDataBool="allTableDataBool"
                  :isSpatialDataBool="isSpatialDataBool"
                  :currentLayerName="currentLayerName"
                  :currentLayerCode="currentLayerCode"
                  :currentVersionCode="currentVersionCode"
                  :allTableDataList="allTableDataList"
                  :allTableTitleList="allTableTitleList"
                  :selectId="selectId"
                  :total="total"
      ></IndexTable>
        <!--图层图例-->
        <div v-if="showHideLegendDivBool" class="layerMap-legend">
          <!--滚动条-->
          <el-scrollbar max-height="500px">
            <p>图例</p>
            <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
</template>
<script setup name="basicDataManage">
import basicDataManage from '@/map/disasterManage/basicDataManage/indexMap.vue'
import IndexTable from './indexTable.vue'
import { getProvince, getProvince2, getChildArea } from "@/api/system/division"
import { getMenuList,getVersionList,getListAndGeom } from "@/api/disasterManage/basicDataManage/indexMap.js";
import { iServerHttp } from "@/map/projMap.js"
import useEventStore from "@/store/modules/event";
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { debug } from 'util';
const currentEvent = computed(() => useEventStore().currentEvent);
const { proxy } = getCurrentInstance();
const props = defineProps(['dataType']);

const data = reactive({
    queryParams: {
      dataTypeCode: '',
      dataRangeCountry: '1',
      dataRangeProvince: '全国',
      dataRangeCity: '',
      dataRangeArea:'',
      dataRangeText:'',//版本范围当前选择内容
      dataLayerText:'',//数据图层当前选择内容
      dataTypeCodeSearchText:'',//搜索版本号输入框文本
    },
    collapseData:{
      showHideBool:true,
      layerName:'',//选中图层名称
    },
    queryParamsNew: {
      dataRangeProvince: '',//省ID
      dataRangeCity: '',//市ID
      dataRangeArea:'',//区县ID
    },
})
let {queryParams,collapseData,queryParamsNew} = toRefs(data);
const boxshow = ref(true)
const versionCodeDivShow = ref(false);//是否显示选择版本号div
//添加数据选择列表
const allLevel1SjlbList = ref([]);
const addDataType = ref('')
const activeName = ref("版本范围");
const activeNames = ref("0");//数据图层类型选择div默认展开的序号
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const openMore = ref(false);
const activeRadioLabel = ref('')
const collapseLayerData = ref([
  {
    value: '1',label: '活断层数据',dictItemCode: 'hdcData',
    children: [{dictId: "1",dictItemCode: "hdc",dictItemId: "1",dictItemName: "活断层",isValid: "1",sort: 1}],
  },
  {
    value: '2',label: '人口数据',dictItemCode: 'populationData',
    children: [{dictId: "2",dictItemCode: "rksj",dictItemId: "2",dictItemName: "人口公里网格",isValid: "1",sort: 2}],
  },
  {
    value: '3',label: '建筑物数据',dictItemCode: 'buildingData',
    children: [{dictId: "3",dictItemCode: "jzwsj",dictItemId: "3",dictItemName: "建筑物格网",isValid: "1",sort: 3}],
  },
  {
    value: '4',label: '行政区划数据',dictItemCode: 'xzqData',
    children: [
      {dictId: "4",dictItemCode: "shengzxq",dictItemId: "4",dictItemName: "省行政区",isValid: "1",sort: 1},
      {dictId: "8",dictItemCode: "shixzq",dictItemId: "8",dictItemName: "市政区",isValid: "1",sort: 2},
      {dictId: "9",dictItemCode: "xxzq",dictItemId: "9",dictItemName: "县行政区",isValid: "1",sort: 3}
    ],
  },
  {
    value: '5',label: 'DEM数据',dictItemCode: 'DEMData',
    children: [{dictId: "5",dictItemCode: "hdc",dictItemId: "5",dictItemName: "DEM高程",isValid: "1",sort: 5}],
  },
  {
    value: '6',label: '遥感数据',dictItemCode: 'remoteSenseData',
    children: [{dictId: "6",dictItemCode: "hdc",dictItemId: "6",dictItemName: "遥感",isValid: "1",sort: 6}],
  },
])
const versionCodeTableData = ref([])
const resetClearAllBool = ref(false);//是否重置清空全部图层数组

//数据类型
const dataTypeInfoArray = ref([
  {name: '断层', radioLabel: '93', code: 'dc', table:"jc_fault",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_fault@datacenter",zIndex:7,fieldId:"id"},
  {name: '人口公里网格数据', radioLabel: '138', code: 'rkglwgsj', table:"jc_population_grid",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_population_grid@datacenter",zIndex:6,fieldId:"id"},
  {name: '建筑物格网数据', radioLabel: '115', code: 'jzwgwsj', table:"jc_ds_gpb_gdzc_grid_total_housing",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_ds_gpb_gdzc_grid_total_housing@datacenter",zIndex:6,fieldId:"jdgggth_id"},
  {name: '省级行政区', radioLabel: '57', code: 'sjxzq', table:"jc_boua2",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua2@datacenter",zIndex:6,fieldId:"jb_id"},
  {name: '地级行政区', radioLabel: '58', code: 'djxzq', table:"jc_boua4",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua4@datacenter",zIndex:6,fieldId:"jb_id"},
  {name: '县级行政区', radioLabel: '59', code: 'xjxzq', table:"jc_boua5",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_boua5@datacenter",zIndex:6,fieldId:"jb_id"},
  {name: '省级行政中心', radioLabel: '60', code: 'sjxzzx', table:"jc_resp_province",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_province@datacenter",zIndex:6,fieldId:"jb_id"},
  {name: '地级行政中心', radioLabel: '61', code: 'djxzzx', table:"jc_resp_city",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_resp_city@datacenter",zIndex:6,fieldId:"jb_id"},
  {name: 'DEM高程数据', radioLabel: '68', code: 'demgcsj', table:"jc_tera",url:iServerHttp()+"/iserver/services/map-demtif/rest/maps/高程_四川省_甘孜藏族自治州__1713856830446",zIndex:6,fieldId:"jt_id"},
  {name: '遥感', radioLabel: '66', code: 'yg1', table:"jc_remote_sensing",url:iServerHttp()+"/iserver/services/map-dzzhTifFile/rest/maps/坡度_1700548615544",zIndex:6,fieldId:"jrs_id"},
  /*{name: 'DEM高程数据', radioLabel: '68', code: 'demgcsj', table:"jc_tera",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_tera@datacenter",zIndex:6,fieldId:"jt_id"},
  {name: '遥感', radioLabel: '66', code: 'yg1', table:"jc_remote_sensing",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_remote_sensing@datacenter",zIndex:6,fieldId:"jrs_id"},*/
  {name: '城镇住宅', radioLabel: '116', code: 'czzz', table:"jc_risk_census_city_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_city_house@datacenter",zIndex:6,fieldId:"jrcch_id"},
  {name: '城镇非住宅', radioLabel: '117', code: 'czfzz', table:"jc_risk_census_city_non_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_city_non_house@datacenter",zIndex:6,fieldId:"jrccnh_id"},
  {name: '农村住宅（独立住宅）', radioLabel: '118', code: 'nczzdlzz', table:"jc_risk_census_country_dl_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_dl_house@datacenter",zIndex:6,fieldId:"jrccdh_id"},
  {name: '农村住宅（集合住宅）', radioLabel: '119', code: 'nczzjhzz', table:"jc_risk_census_country_jh_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_jh_house@datacenter",zIndex:6,fieldId:"jrccjh_id"},
  {name: '辅助用房', radioLabel: '120', code: 'fzyf', table:"jc_risk_census_country_fz_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_fz_house@datacenter",zIndex:6,fieldId:"jrccfh_id"},
  {name: '农村非住宅', radioLabel: '121', code: 'ncfzz', table:"jc_risk_census_country_non_house",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_risk_census_country_non_house@datacenter",zIndex:6,fieldId:"jrccnh_id"},
]);
// 改变版本范围
let disabled1 = ref(false)
const changeRadio = (value)=>{
  if(value=="1"){//国家级
    queryParams.value.dataRangeProvince = "全国";
    queryParams.value.dataRangeCity = "";
    queryParams.value.dataRangeArea = "";
    queryParamsNew.value.dataRangeProvince = "";
    queryParamsNew.value.dataRangeCity = "";
    queryParamsNew.value.dataRangeArea = "";
    disabled1.value = false;
  }else{//省级
    queryParams.value.dataRangeProvince = "";
    queryParams.value.dataRangeCity = "";
    queryParams.value.dataRangeArea = "";
    queryParamsNew.value.dataRangeProvince = "";
    queryParamsNew.value.dataRangeCity = "";
    queryParamsNew.value.dataRangeArea = "";
    //权限控制
    isAdminCountryId();
  }
}
//权限控制
function isAdminCountryId(){
  // if(!isAllAdmin.value){
  //   disabled1.value = true;
  //   let list = provinceData.value;
  //   for(let i=0;i<list.length;i++){
  //     if(list[i].id==isCountryId.value){//省份
  //       queryParamsNew.value.dataRangeProvince = list[i].id;
  //       queryParams.value.dataRangeProvince = list[i].name;
  //       getChildArea(list[i].id).then(response => {
  //         cityData.value = response.data;
  //       });
  //       break;
  //     }
  //   }
  // }else{
  //   disabled1.value = false;
  // }
}
//收起选择数据div
const hideTabBoxDiv = () => {
  if(boxshow.value){
    //收起数据图层
    hideCollapseDiv();
    boxshow.value = false;
  }else{
    boxshow.value = true;
  }
}
/** 获取省列表 */
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  });
}
//选择图层的版本号数据列表
const typeCodeDataList = ref([]);
//重置数据图层
const resetCollapseDiv = () => {
  //清空图层选择的版本号列表
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++) {
    datalist[i].typeCodeSelectData = [];
  }
  activeRadioLabel.value = null;
  versionCodeDivShow.value = false;
  queryParams.value.dataLayerText = "";
  resetClearAllBool.value = true;//是否重置清空全部图层数组
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
  getLegendHtml(null);//清空图例
}
const showHideLegendDivBool = ref(false);//是否显示图例
const layerShowHideArray = ref([]);//图层是否显示数组
function setLayerShowHideArray(){
  let showHideArray = [];
  let dataTypeArray = dataTypeInfoArray.value;
  for(let i=0;i<dataTypeArray.length;i++){
    let item = dataTypeArray[i];
    showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
  }
  layerShowHideArray.value = showHideArray;
}
//重置数据图层和版本范围
const resetAllCollapseDiv = () => {
  //重置数据图层
  resetCollapseDiv();
  activeName.value = '版本范围';
}
//图例
const getLegendHtml = (obj)=>{
  console.log("图例");
  console.log(obj);
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  console.log("showHideArray");
  console.log(showHideArray);
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    showHideLegendDivBool.value = bool;
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    showHideLegendDivBool.value = false;
  }
}
//当前选中行数据
const currentRow = ref(null);
// 更多信息
const handleMore = () =>{
  let row = currentRow.value;
  if(row){
    // proxy.$refs['versionCodeTable'].toggleRowExpansion(row);
    //根据版本号查询文件和附件列表
    // getFileMessage(row.versionCode).then((response) => {
    //   nextTick(() => {
    //     console.log("根据版本号查询文件和附件列表");
    //     console.log(response.data);
    //     let result = response.data;
    //     currentRow.value.dataFileList = result.dataFileList;//文件
    //     currentRow.value.attachmentFileList = result.attachmentFileList;//附件
        openMore.value = true;
    //   });
    // });
  }else{
    proxy.$modal.msgWarning("请先勾选1条数据");
  }
}
//确定版本范围
const submitSelect = (value)=>{
  proxy.$refs["queryRef"].validate(valid => {
    if (valid) {
      //重置数据图层
      resetCollapseDiv();
      collapseData.value.showHideBool=true;//展开数据图层
      let country = queryParams.value.dataRangeCountry;
      if(country=="1"){
        country = "国家级数据";
      }else{
        country = "省级数据";
      }
      let province = isUndefined(queryParams.value.dataRangeProvince);
      let city = isUndefined(queryParams.value.dataRangeCity);
      let area = isUndefined(queryParams.value.dataRangeArea);
      queryParams.value.dataRangeText = country+"，"+province+city+area;
      activeName.value = '数据图层';
    }
  });
}
//判断是否无值则返回空字符串，“全部”返回空字符串
function isUndefined(value){
  if(value==undefined || value==null || value=='全部'){
    value = "";
  }
  return value;
}
//选择省
function chooseProvince(value) {
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  cityData.value = [];
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeProvince = "";
  }else{
    if(value=="全国"){
      queryParams.value.dataRangeProvince = value;
      queryParamsNew.value.dataRangeProvince = "";
    }else{
      let list = provinceData.value;
      for(let i=0;i<list.length;i++){
        if(list[i].name==value){
          queryParamsNew.value.dataRangeProvince = list[i].id;
          queryParams.value.dataRangeProvince = list[i].name;
          getChildArea(list[i].id).then(response => {
            cityData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择市
function chooseCity(value) {
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeArea = "";
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeCity = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeCity = value;
      queryParamsNew.value.dataRangeCity = "";
    }else{
      let list = cityData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeCity = list[i].id;
          queryParams.value.dataRangeCity = list[i].name;
          getChildArea(list[i].id).then((response) => {
            areaData.value = response.data;
          });
          break;
        }
      }
    }
  }
}
//选择区县
function chooseArea(value){
  if(value==""){
    queryParamsNew.value.dataRangeArea = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeArea = value;
      queryParamsNew.value.dataRangeArea = "";
    }else{
      let list = areaData.value;
      for(let i=0;i<list.length;i++) {
        if (list[i].name == value) {
          queryParamsNew.value.dataRangeArea = list[i].id;
          queryParams.value.dataRangeArea = list[i].name;
        }
      }
    }
  }
}
/** 单击选择行 */
function clickRow(row) {
  proxy.$refs.versionCodeTable.toggleRowSelection(row);
  currentRow.value = row;
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}

/** 多选框选中数据 */
function handleSelectionChange(selecteds, row) {
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}
const selectdatas = ref([]);//勾选的数据
const isSpatialDataBool = ref(false)
const allTableDataBool = ref(false)
//设置图层选择的版本号列表（添加、移除）并查询图层数据
function setActiveTypeCodeList(row){
  let bool = false;//是否添加版本号
  //添加、移除版本号
  if (!selectdatas.value.includes(row.versionCode)) {
    selectdatas.value.push(row.versionCode);//添加
    bool = true;
  } else {
    selectdatas.value.forEach((id, index) => {
      if (id === row.versionCode) {
        selectdatas.value.splice(index, 1);//移除
      }
    });
    bool = false;
  }
  //清空当前行数据
  currentRow.value = null;
  console.log(selectdatas.value);
  console.log("设置图层选择的版本号列表");
  console.log(row);
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  // if(data!=null){
    console.log("根据序号值获取版本数据");
    console.log(data);
    //设置图层对应的选择版本号列表
    // data.typeCodeSelectData = selectdatas.value;
    //是否为空间数据
    let spatialBool = true;
    isSpatialDataBool.value = spatialBool;
    resetClearAllBool.value = false;//是否重置清空全部图层数组
    if(spatialBool){//空间数据
      if(bool){//添加版本号
        //根据图层类型查询图层版本号数据
        //查询版本号对应图层数据
        getDataByVersionCode(row,true);
      }else{//移除版本号s
        allListData.value = [radioLabel,row.versionCode,[],false];
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
        allTableTitleList.value = [];
      }
    }else{//非空间数据
      if(bool) {//添加版本号
        //查询版本号对应非空间数据
        getDataByVersionCode(row,false);
      }else{
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
        allTableTitleList.value = [];
      }
    }
  // }
}
const allTableDataList = ref([])
const allTableTitleList = ref([])
const currentLayerName = ref('')
const currentLayerCode = ref('')
const currentVersionCode = ref('')
const selectId = ref('')
// const loading = ref(false)
const tempAllTableDataList = ref([])
const allListData = ref([]);//地图显示数据列表
//总数据量
const total = ref(0);
//查询版本号对应图层数据
const getDataByVersionCode = (row,spatialBool)=>{
  console.log("开始查询版本号对应图层数据");
  let typeCode = row.dataTypeLevel3Code;
  let versionCode = row.versionCode;
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空图层表格数据列表
  allTableTitleList.value = [];
  //当前行数据
  currentRow.value = row;
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = versionCode;
  //选中1条数据的ID
  selectId.value = "";
  // loading.value = true;

  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:1,//页码
    rows:10,//分页数据量
  }
  //查询版本号对应图层数据
  proxy.$modal.loading();
  getListAndGeom(params).then((response) => {
    nextTick(() => {
      proxy.$modal.closeLoading();
      console.log("查询版本号对应图层数据结果");
      console.log(response.data);
      let resultList = response.data;//data,title,page,rows,total,totalPage
      let totalPage = resultList.totalPage;
      allTableDataList.value = resultList.rows;//图层表格数据列表
      allTableTitleList.value = resultList.title;//表头字段列表
      total.value = resultList.total;//总数据量
      let radioLabel = activeRadioLabel.value;
      if(spatialBool){//空间数据
        // allListData.value = [radioLabel,row.versionCode,resultList.data,true];//显示图层数据列表
        allListData.value = [radioLabel,row.versionCode,[],true];//显示超图图层
      }
      // loading.value = false;
      allTableDataBool.value = true;//显示表格
    });
  }).catch(err => {
    proxy.$modal.closeLoading();
    // loading.value = false;
  });


  //临时图层数据
  tempAllTableDataList.value = [];
  //分页循环查询获取全部数据
  getAllDataByPage(typeCode,versionCode,1,row,spatialBool);
}
//根据三级数据类别（数据表）code获取数据图层名称
const getDictItemNameByCode = (typeCode) => {
  let dictItemName = "";
  let list = typeCodeDataList.value;
  let flag = false
  for(let j = 0;j < list.length;j++) {
    for(let i=0;i<list[j].length;i++){
      if(list[j][i].dictItemCode==typeCode){
        dictItemName = list[j][i].name;
        flag = true
        break;
      }
    }
    if(flag) {
      break
    }
  }
  return dictItemName;
}
//分页循环查询获取全部数据
const getAllDataByPage = (typeCode,versionCode,page,row,spatialBool) => {
  let rows = 200;
  if(typeCode=="sjxzq" || typeCode=="djxzq" || typeCode=="xjxzq" || typeCode=="xjxzq1"){//行政区划
    rows = 10;
  }
  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:page,//页码
    rows:rows,//分页数据量
  }
  console.log("params");
  console.log(params);
  //查询版本号对应图层数据
  getListAndGeom(params).then((response) => {
    nextTick(() => {
      console.log("查询版本号对应图层数据结果");
      console.log(response.data);
      let resultList = response.data;//data,title,page,rows,total,totalPage
      let totalPage = resultList.totalPage;
      allTableDataList.value = resultList.rows;//图层表格数据列表
      allTableTitleList.value = resultList.title;//表头字段列表
      total.value = resultList.total;//总数据量
      //图层数据
      let tempArray = tempAllTableDataList.value;
      if(resultList.data!=null && resultList.data.length>0){
        tempAllTableDataList.value = tempArray.concat(resultList.data);
      }
      if(page<totalPage){
        page = page + 1;
        //分页循环查询获取全部数据
        getAllDataByPage(typeCode,versionCode,page,row,spatialBool);
      }else{
        allTableDataList.value = tempAllTableDataList.value;//图层表格数据列表
        allTableTitleList.value = resultList.title;//表头字段列表
        allTableDataBool.value = true;
        let radioLabel = activeRadioLabel.value;
        if(spatialBool){//空间数据
          allListData.value = [radioLabel,row.versionCode,tempAllTableDataList.value,true];//显示图层数据列表
        }
        // loading.value = false;
      }
    });
  }).catch(err => {
    // loading.value = false;
  });
}
const showDataRangeTab = (value)=>{
  activeName.value = '版本范围';
  //收起数据图层
  hideCollapseDiv();
}
const showDataLayerTab = (value)=>{
  if(queryParams.value.dataRangeText==""){
    proxy.$modal.msgWarning("请先设置版本范围");
  }else{
    activeName.value = '数据图层';
  }
}
//收起数据图层
const hideCollapseDiv = () => {
  //获取数据图层当前选择内容
  getDataLayerText();
  collapseData.value.showHideBool=false;
  versionCodeDivShow.value = false;
  activeRadioLabel.value = null;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
}
const alertSelect = () => {
  ElMessageBox.alert('请选择要展示的数据及版本', '系统提示', {
    confirmButtonText: '确定',
    callback: () => {
      boxshow.value = true;
    },
  })
}
//获取数据图层当前选择内容
function getDataLayerText(){
  let text = "";
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    let radioLabel = datalist[i].radioLabel;
    let selectArray = datalist[i].typeCodeSelectData;
    if(selectArray.length>0){
      //根据序号获取图层全名数组
      let fullNameArr = getLayerFullNameArr(radioLabel);
      if(fullNameArr.length==2){
        text += fullNameArr[0] + "/" + fullNameArr[1] + "，";
      }else{
        continue;
      }
      for(let j=0;j<selectArray.length;j++){
        let versionCode = selectArray[j];
        if(j>0){
          text += "，";
        }
        text += "版本号"+versionCode;
      }
      text += "；";
    }
  }
  queryParams.value.dataLayerText = text;
}
//重置版本范围
const resetSelect = ()=>{
  proxy.resetForm("queryRef");
  queryParams.value.dataRangeProvince = "";
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParams.value.dataRangeText = "";
  queryParamsNew.value.dataRangeProvince = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  //版本范围当前选择内容
  let country = queryParams.value.dataRangeCountry;
  if(country=="1"){
    country = "国家级数据";
    queryParams.value.dataRangeProvince = "全国";//默认全国
  }else{
    country = "省级数据";
    //权限控制
    isAdminCountryId();
  }
  queryParams.value.dataRangeText = country;
}
const handleChange = (val) => {
  console.log(val)
}
//图层选择绑定值变化时触发的事件
const radioChange = () => {
  console.log("图层选择");
  //隐藏选择版本号div
  versionCodeDivShow.value = false;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
  versionCodeTableData.value = [];//清空表数据
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    //获取图层名称
    collapseData.value.layerName = data.name;
  }
  selectdatas.value = [];//清空勾选数据
  //查询版本列表
  querySysDataVersion(data);
}
//根据序号值获取版本数据
const getLayerInfoByRadioIndex = (radioLabel) => {
  let data = null;
  let datalist = typeCodeDataList.value;
  let flag = false
  for(let j = 0;j < datalist.length;j++) {
    for(let i=0;i<datalist[j].length;i++){
      if(datalist[j][i].radioLabel==radioLabel){
        data = datalist[j][i];
        flag = true
        break;
      }
    }
    if(flag) {
      break
    }
  }
  return data;
}
//查询版本列表
const querySysDataVersion = (data)=>{
  let params = {
    dataRangeCountry : queryParams.value.dataRangeCountry,//1-国家级， 2-省级
    province : queryParamsNew.value.dataRangeProvince,//省份id
    city : queryParamsNew.value.dataRangeCity,//市id
    area : queryParamsNew.value.dataRangeArea,//区县id
    dataType2 : data.dictItemId,//二级数据类别code
    versionCode : queryParams.value.dataTypeCodeSearchText,//版本号
  }
  //查询版本列表
  getVersionList(params).then((response) => {
    nextTick(() => {
      console.log("查询版本列表");
      console.log(response.data);
      //显示选择版本号div
      versionCodeDivShow.value = true;
      //测试数据
      versionCodeTableData.value = response.data;
      nextTick(() => {
        //设置勾选的表数据
        changeState();
      });
    });
  });
}
//设置勾选的表数据
const changeState = () => {
  console.log("设置勾选的表数据");
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    console.log(data.typeCodeSelectData);
    //设置勾选的表数据
    selectdatas.value = data.typeCodeSelectData;
  }
  if(proxy.$refs.versionCodeTable){
    let tableData = versionCodeTableData.value;
    let selectDataArray = selectdatas.value;
    if(tableData){
      for (let i = 0; i < tableData.length; i++) {
        if (selectDataArray.indexOf(tableData[i]["versionCode"]) != -1) {//勾选
          proxy.$refs.versionCodeTable.toggleRowSelection(
              tableData[i],
              true
          );
        }else{//不勾选
          proxy.$refs.versionCodeTable.toggleRowSelection(
              tableData[i],
              false
          );
        }
      }
    }
  }
}
const allRadioIndexData = ref([]);//全部序号列表
const level1DataTree = ref(null);//数据类别一级code二级树
//获取数据图层显示列表
const getAllTreeData = (dataType)=>{
  /**
   * dictCode :1级数据类别code
   * 滑坡遥感影像解译数据 landslide
   * 地貌数据 landform
   * 天然密度数据 naturedensity
   * 地震构造数据 seismotectonis
   */
  //1级数据类别信息
  if(dataType){
    //查询数据类别树
    getMenuList().then((response) => {
      nextTick(() => {
        collapseLayerData.value = response.data;
        let arrList = []
        let allRadioIndexArray = [];
        for(let j = 0;j < response.data.length;j++) {
          let list = response.data[j].children;
          let typeCodeDataArray = [];
          if(list!=null && list.length>0){
            for(let i=0;i<list.length;i++){
              let data = list[i];
              // childrenData.push({
              //   name: data.dictItemName,
              //   radioLabel: data.dictItemCode,
              //   dictItemCode: data.dictItemCode,
              //   spaceBool:true,//是否空间数据
              // });
              //选择图层的版本号数据列表
              typeCodeDataArray.push({
                name: data.dictItemName,
                radioLabel: data.dictItemCode,
                dictItemCode: data.dictItemCode,
                dictItemId: data.dictItemId,
                spaceBool:true,//是否空间数据
                typeCodeSelectData:[],
              });
              allRadioIndexArray.push(data.dictItemCode);
            }
            arrList.push(typeCodeDataArray)
          }
        }
        typeCodeDataList.value = arrList;
        allRadioIndexData.value = allRadioIndexArray;
        // console.log("查询数据类别树");
        // console.log(response.data);
        // let result = response.data;
        // level1DataTree.value = result;//1级数据类别树
        // let list = result.children;
        // allLevel1SjlbList.value = list;//2级数据类别
        // let collapseLayerDataArray = [];
        // let typeCodeDataArray = [];
        // let allRadioIndexArray = [];
        // let childrenData = [];
        // if(list!=null && list.length>0){
        //   for(let i=0;i<list.length;i++){
        //     let data = list[i];
        //     childrenData.push({
        //       name: data.dictItemName,
        //       radioLabel: data.dictItemCode,
        //       dictItemCode: data.dictItemCode,
        //       spaceBool:true,//是否空间数据
        //     });
        //     //选择图层的版本号数据列表
        //     typeCodeDataArray.push({
        //       name: data.dictItemName,
        //       radioLabel: data.dictItemCode,
        //       dictItemCode: data.dictItemCode,
        //       spaceBool:true,//是否空间数据
        //       typeCodeSelectData:[],
        //     });
        //     //全部序号列表
        //     allRadioIndexArray.push(data.dictItemCode);
        //   }
        //   if(list.length==1){//2级数据类型只有1个
        //     addDataType.value = list[0].dictItemCode;//设置添加数据类型
        //   }
        // }
        // //数据类别信息
        // let collapseData = {
        //   value:result.dictId,
        //   label: result.dictName,
        //   children: childrenData,
        //   dictItemCode: result.dictCode,
        // };
        // collapseLayerDataArray.push(collapseData);
        // //默认展开显示
        // activeNames.value = result.dictId;
        // //数据图层显示列表
        // collapseLayerData.value = collapseLayerDataArray;
        // //选择图层的版本号数据列表
        // typeCodeDataList.value = typeCodeDataArray;
        // //全部序号列表
        // allRadioIndexData.value = allRadioIndexArray;
        //显示地图模块
        // completeRefreshData.value = true;
      });
    });
  }
}
//获取数据类型一级
const getLevel1DataType = watch(() => props.dataType, value => {// watch函数监听props.dataType
  // if(value){
    getAllTreeData('landform');
  // }
},{immediate:true});
onMounted(() => {
  getProvinceData()
  setLayerShowHideArray();
  alertSelect();
})

</script>
<style scoped lang="scss">
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:80%;
}
.select{
  position:absolute;
  top:29px;
  left:29px;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .selectData{
    color: darkolivegreen;
    width: 150px;
    height: 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
    /*border:1px solid #707070;*/
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 4px;
  }
}
.box {
  position:absolute;
  top:70px;
  left:29px;
  width: 400px;
  bottom:17px;
  background-color: #fff;
  transition: height 0.3s ease;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

.box-max {
  width: 820px;
}

.box-min {
  width: 400px;
}

.box-hide-div {
  position:absolute;
  top:80px;
  left:29px;
  width:370px;
  height:130px;
  color:#fff;
  background: #000;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
  border:1px solid #707070;
  border-radius: 4px;
  opacity: 0.5;
}

.box-hide-div-label-span {
  position: absolute;top:10px;left:15px;font-weight: bold;font-size: 16px;
}

.box-hide-div-text-span {
  position: absolute;
  top: 40px;
  left: 15px;
  font-size: 14px;
  height: 80px;
  overflow: auto;
  right: 15px;
}
.tab-div {
  position:absolute;top:0px;left:0px;width:110px;height: 100%;border-right: 1px solid #d8dce5;
}
.tab-button {
  position:relative;top:0px;left:0px;width:100%;height:50px;line-height: 50px;text-align: center;
}
.tab-active {
  color:#fff;
  background:#107ce5;
}
.tab-no {
  color:#666;
  background:#fff;
}

.tab-content-all-div {
  position:absolute;top:0px;left:110px;width:290px;height: 100%;
}

.tab-content {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.tab-span {
  float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;
}

.tab-layercollapse-allShow {
  position: absolute;top: 80px;width:100%;bottom:0px;
}

.tab-layercollapse-allShow-head {
  width:100%;height:40px;background:#fff;
}

.tab-layercollapse-allHide {
  width:100%;background:rgb(230 242 253);min-height: 80px;max-height:200px;border-top: 1px solid #d8dce5;overflow:auto;
}

.tab-layercollapse-allHide-label-span{
  position: relative;top:10px;left:20px;font-weight: bold;font-size: 16px;
}
.tab-layercollapse-allHide-text-span {
  position: relative;margin-top: 20px;left:20px;font-size: 14px;width: 250px;display: block;
}

.tab-layercollapse-div{
  position: absolute;top: 40px;width:100%;bottom:0px;overflow:auto;
}

.foot-div {
  position:absolute;left:0px;bottom:0px;width:400px;height:40px;border-top:1px solid #d8dce5;cursor: pointer;
}

.tab-select-versionCode-div {
  position: absolute;top:0px;left:400px;width:420px;bottom:0px;background:#fff;
  border-left:1px solid #d8dce5;padding:10px;
}

.tab-collapse-radioDiv{
  padding-left:20px;
}

.tab-table-div {
  position:absolute;top:102px;left:0px;width:100%;bottom: 40px;overflow: auto;
}

:deep(.el-collapse-item__header) {
  background-color: rgb(230 242 253) !important;
  padding-left: 10px;
  font-size: 14px;
  color: #475767;
}

:deep(.el-collapse-item__content) {
  padding-top: 20px;
  padding-bottom: 20px;
}

// 深度选择器 去掉表头全选按钮
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}
.table-button-div {
  position: absolute;
  bottom: 0px;
  height: 40px;
  padding: 5px;
}
//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
</style>